<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2>{{msg}}</h2>
      1.v-html和v-text
      <h3 v-html="msg"></h3>
      <h3 v-text="msg"></h3>
      <hr />
      2.v-on v-on 简写为@：
      <button @click="fun1">点击</button> 完成的写法：<button v-on:click="fun1">
        点击
      </button>

      <hr />
      3.v-if v-else v-show

      <h6 v-show="flag">{{msg}}</h6>
      <h6 v-if="flag">{{msg}}</h6>
      <h6 v-else>{{msg2}}</h6>

      4.v-for 可以循环数字和数组

      <!-- <div v-for="i in 10" v-show="i%2==0">{{i}}</div> -->
      <!-- v-for可以跟v-show搭配使用 -->

      <ul>
        <li v-for="(item,index) in arr">
          姓名：{{item.name}} 年龄：{{item.age}}
        </li>
      </ul>
    </div>
    <script src="vue-2.4.0.js"></script>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {
          flag: false,
          msg: "<a>hello world</a>",
          msg2: "vue真的太简单了！！！！",
          arr: [
            { name: "小明", age: 19 },
            { name: "小勋", age: 13 },
            { name: "小贾", age: 12 },
          ],
        },
        methods: {
          fun1() {
            console.log(this.msg);
          },
        },
      });
      //   指令 就是命令的意思 指令是作用在标签上的,指令用v-xx表示

      //   1.v-html和v-text
      //渲染 成html和text

      //   2.v-on 绑定 事件 可以简写为@

      //   3. v-if和v-show
      //   v-if是判断dom节点 是否创建
      //   v-show是判断 dom节点的display none 和block

      //   4.v-for 循环
    </script>
  </body>
</html>
